<script setup lang="ts">
/*
 * 业务员成绩排行
 * */
defineOptions({
  name: "SalesRanking",
  inheritAttrs: false,
});
import { getSalesRanking } from "@/api/user";
import { SalesRanking } from "@/api/user/types";
const loading = ref(false); //进度条加载状态
const salesRankingData = ref<SalesRanking[]>(); //前5名业务员的排名数据源
/*获取前5名业务员的排名信息*/
getSalesRanking()
  .then(({ data }) => {
    salesRankingData.value = data.list;
    loading.value = true;
  })
  .finally(() => {
    loading.value = false;
  });
/*定义业务员成绩排行进度条的颜色*/
const progressColors = ref([
  "#889bfa",
  "#ffc33e",
  "#63e386",
  "#fb6280",
  "#0bead7",
]);

// 优秀榜下拉数据源
const excellenceData = [
  {
    value: "1",
    label: "优秀1",
  },
  {
    value: "2",
    label: "优秀2",
  },
  {
    value: "3",
    label: "优秀3",
  },
];
let excellenceValue = ref("");

// 通过率下拉数据源
const passingRateData = [
  {
    value: "1",
    label: "1",
  },
  {
    value: "2",
    label: "2",
  },
  {
    value: "3",
    label: "3",
  },
];
let passingRateValue = ref("");
</script>

<template>
  <el-card class="text-3 h-[100%]" v-loading="loading">
    <template #header>
      <div class="flex-between">
        <span class="title-font">业务员成绩排行</span>
        <div>
          <el-select
            class="w-[100px] b-rd-3 p-r-10px"
            size="small"
            v-model="excellenceValue"
            placeholder="优秀榜"
          >
            <el-option
              v-for="item in excellenceData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            class="w-[100px] b-rd-3"
            size="small"
            v-model="passingRateValue"
            placeholder="通过率"
          >
            <el-option
              v-for="item in passingRateData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </template>
    <el-row
      class="bg-color py-3"
      v-for="(item, index) in salesRankingData"
      :key="index"
    >
      <el-col :xs="3" :sm="2" :lg="2" class="cursor-pointer">
        <span>Top{{ index + 1 }}</span>
      </el-col>
      <el-col :xs="3" :sm="2" :lg="2" class="cursor-pointer">
        <span>{{ item.username }}</span>
      </el-col>
      <el-col :xs="9" :sm="13" :lg="13" class="cursor-pointer">
        <el-progress
          :color="progressColors[index]"
          :percentage="item.successRate"
        />
      </el-col>
      <el-col :xs="3" :sm="2" :lg="2" class="cursor-pointer">
        <span>{{ item.orderNum }}个</span>
      </el-col>
      <el-col :xs="6" :sm="5" :lg="5" class="cursor-pointer">
        <span>业务员成绩排行</span>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">
:deep .el-card__header {
  padding: 0.7em;
}

.el-card {
  border: 0;
  border-bottom: 1px solid $bodyBgColor !important;
  border-radius: 0;
}
</style>
